<template>
	<view class="good-item">
		
		<view class="good-logo">
			<radio @click="radioClickHandler" :checked="goods.goods_state" color="#C00000" v-if="showRadio" /></radio>
			<image :src="goods.goods_small_logo || defaultPic" mode="" ></image>
			</view>
		
		<view class="good-des">
			<text>{{goods.goods_name}}</text>
			<view class="goods-info-box">
				<text class="good-price">¥{{goods.goods_price | tofixed}}</text>
				<uni-number-box :min="1" :value="goods.goods_count" v-if="showNum" @change="goodsCountchange"></uni-number-box>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"my-good",
		data() {
			return {
				defaultPic:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fdbfaad8aed38c49805b16e7b2afdb441ab2813b68895-ihqaSI_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633767486&t=df8c39592a227ae82b9b282063adc469",
				
			};
		},
		props:{
			goods:{
				type: Object,
				default:{}
			},
			showRadio:{
				type:Boolean,
				default:false
			},
			showNum: {
				type:Boolean,
				default:false
			}
		},
		
		filters:{
			tofixed(num){
				return Number(num).toFixed(2)
			}
		},
		methods:{
			gotoSearch(){
				this.$emit('click');
				console.log("=====")
			},
			radioClickHandler(e) {
				this.$emit("radio-change",{
					goods_id:this.goods.goods_id,
					goods_state:!this.goods.goods_state
				})
			},
			goodsCountchange(val) {
				console.log(val);			
				this.$emit("num-Change",{
					goods_id:this.goods.goods_id,
					goods_count:+val
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.good-logo {
		// width: 120px;
		height: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods-info-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	image {
		width: 100px;
		height: 100px;
		
	}
	.good-item {
		display: flex;
		flex-direction:row;
		font-size: 12px;
		// margin: 10px 5px;
		padding: 10px;
		border-bottom: 1px solid #efefef;
	}
	.good-des {
		display: flex;
		align-items: center;
		flex-direction:column;
		justify-content: space-between;
		margin-left: 10px;
	}
	.good-price {
		color: #c00000;
		font-size: 16px;
		margin-bottom: 5px;
	}
</style>
